<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- SEO Title, Keywords, Description tags -->
    <title>晟友科技—企业发票管理系统注册页</title>
    <meta name="keywords" content="晟友科技,费云,feeclouds,电子发票,发票真伪查询,发票查询,发票真假,发票真伪查询系统,发票识别系统,发票信息采集,发票查重,发票验真">
    <meta name="description" content="企业发票真伪查询、查重、校验纳税人识别号、数据结构化。扫描发票二维码查询发票详情，发票明细数据管理，对接ERP系统及报销系统">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Stylesheet -->
    <link href="css/web_style.css" rel="stylesheet" />
    <link href="css/product.css" rel="stylesheet" />
    <link href="css/register.css" rel="stylesheet" />

    <!-- jQuery -->
    <script src="ruoyi/js/jquery.min.js"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ajax/libs/layui/layui.min.js}"></script>

</head>

<body class="product">

    <!-- Navigation -->
    <a class="hamburger"></a>

    <nav role="navigation" class="main_nav">
        <th:block th:include="web_include :: nav" />
    </nav>
    <section class='footer-section'>
    </section>
    <section class='register-section'>
        <div class='person-con' style="display: none;">
            <div class="person-box">
                <div class='type-title'>注册成功</div>
                <div class='type-sub'>
                    <div style='margin-top:10px'>稍后会有产品顾问跟您沟通为您开通试用账号，协助您体验晟友科技功能</div>
                    <div style='margin-top:10px'>点击<a href="javascript:void(0)" id='window-modal'>在线咨询</a>快速定制发票解决方案，客服实时在线为您服务！</div>
                    <div style='margin-top:10px'>咨询热线：400-9922-752</div>
                </div>
                <div class='back-btn'><a href="index-2.html">返回</a></div>
            </div>
        </div>
        <div class='form-con' style="display: block;">
            <div class="form-box">
                <div class='form-title'>注册成功可体验更多功能</div>
                <div class='group-warp'>
                    <div class='form-item'>
                        <div class='input-lable'><span class='mast-span'>* </span>公司名称：</div>
                        <input type="text" name="company_o" id="inp_company" class="company_t input" placeholder="请输入公司名称">
                    </div>
                    <div class="error_o">
                        <span class="error_c_t"></span>
                    </div>
                </div>
                <div class='group-warp'>
                    <div class='form-item'>
                        <div class='input-lable'><span class='mast-span'>* </span>您的姓名：</div>
                        <input type="text" name="name_o" id="inp_name" class="name_t input" placeholder="请输入您的姓名">
                    </div>
                    <div class="error_o">
                        <span class="error_n_t"></span>
                    </div>
                </div>
                <div class='group-warp'>
                    <div class='form-item'>
                        <div class='input-lable'><span class='mast-span'>* </span>所属部门：</div>
                        <div class='select-input'>
                            <div class='select-action'>
                                <span class='select-font'>请选择所属部门</span>
                                <span class='triangle_border_down'></span>
                            </div>
                            <ul class='select-con' id="deptid">
<!--                                <li class='select-li' style='margin-left: -12px;'>企业高管</li>-->
<!--                                <li class='select-li'>财务部</li>-->
<!--                                <li class='select-li'>市场销售</li>-->
<!--                                <li class='select-li'>后勤采购</li>-->
<!--                                <li class='select-li'>人力行政</li>-->
<!--                                <li class='select-li'>产品技术</li>-->
                            </ul>
                        </div>
                    </div>
                    <div class="error_o">
                        <span class="error_d_t"></span>
                    </div>
                </div>
                <div class='group-warp'>
                    <div class='form-item'>
                        <div class='input-lable'><span class='mast-span'>* </span>您的电话：</div>
                        <input type="text" name="iphone_o" id="inp_iphone" class="iphone_t input" placeholder="请输入手机号码">
                    </div>
                    <div class="error_o">
                        <span class="error_t_t"></span>
                    </div>
                </div>
                <style>
                    #yzm{
                        position: relative;
                        height: 0;
                    }
                    #yzm .l-captcha{
                        position: absolute;
                        z-index: 90;
                        right: 0px;
                        opacity: 0;
                        width: 157px!important;
                        height: 37px!important;
                        overflow: hidden;
                    }
                    #yzm .send_yzm{
                        position: absolute;
                        width: 35%;
                        right: 0px;
                        float: right;
                        text-align: center;
                        background: #FFFFFF;
                        border: 1px solid #C1C4CB;
                        border-radius: 24px;
                        line-height: 32px;
                        font-size: 14px;
                        cursor: pointer;
                        color: #3389FF;
                    }

                </style>
                <div class='group-warp'>
                    <div class='form-item'>
                        <div class='input-lable'><span class='mast-span'>* </span>密码：</div>
                        <div class='yzm-con'>
                            <input type="text" name="pwd" id="pwd" class="code_t input" placeholder="请输入密码">
<!--                            <div class='' id="yzm">-->
<!--                                <span class="send_yzm">发送验证码</span>-->
<!--                                <div class="l-captcha" data-site-key="6807424879f7cd0a05476180a9d5e861" data-callback="callback"></div>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <div class="error_o">
                        <span class="error_y_t"></span>
                    </div>
                </div>
                <div class='next-btn' onclick="submitHandler()">立即注册</div>
            </div>

        </div>
    </section>
    <th:block th:include="web_include :: bottom2" />
</body>

</html>
<script th:inline="javascript">
    var ctx = [[@{/}]];
    var url = ctx + "regsave.html";

    var deptlist=[];
    function getDeptlist() {
        var config = {
            url: ctx + "deptlist.html",
            type: "post",
            async: false, // 设置为同步
            dataType: "json",
            success: function(result) {
                deptlist=result.data;
                bindkind("deptid");
            }
        };
        $.ajax(config)
    }

    function bindkind(domid){
        var ul = document.getElementById(domid);
        var li0 = document.createElement("li");
        li0.textContent = '';
        li0.classList.add('select-li');
        ul.appendChild(li0);
        deptlist.forEach(item => {
            var li = document.createElement("li");
            li.textContent = item.deptName;
            li.classList.add('select-li');
            li.setAttribute('id', item.deptId);
            ul.appendChild(li);
        });
    }

    selectDeptid = '';
    document.getElementById('deptid').addEventListener('click', function(event) {
        var target = event.target;
        if (target.nodeName === 'LI') {
            selectDeptid = target.getAttribute("id");
        }
    });

    function submitHandler() {
        var data = {
            company:$('#inp_company').val(),
            userName:$('#inp_name').val(),
            deptId:selectDeptid,
            phonenumber:$('#inp_iphone').val(),
            password:$('#pwd').val()
        };
        var config = {
            url: url,
            type: "post",
            data: data,
            async: true,
            dataType: "json",
            success: function(result) {
                top.layer.msg(result.msg, { icon: 'warning', time: 3000, shift: 5 });
            }
        };
        $.ajax(config)
    }

    $(function() {
        getDeptlist();
    });
</script>